<template>
<!--&lt;!&ndash;    添加醒目的提示，本页面即将废弃&ndash;&gt;-->

<!--    <div class="bg-purple">-->
<!--&lt;!&ndash;      提示：本页面即将废弃(用文字)&ndash;&gt;-->
<!--      <el-alert-->
<!--        title="本页面即将废弃"-->
<!--        type="warning"-->
<!--        description="请等待新版本"-->
<!--        show-icon-->
<!--        :closable="false"-->
<!--        style="margin-bottom: 10px;">-->
<!--      </el-alert>-->


<!--    </div>-->

    <el-container :style="{ height:'100%'}">
      <el-header ref="header" :class="'header-' + headerColor" >
      </el-header>
      <el-container>
        <el-aside :class="['aside-' + asideColor, 'aside-default']">
          <AsideMenu @open-gpt-web="openGptWebUrl"
          @openFormsTable = "openFormsTable"/>


        </el-aside>
        <el-main :class="['main-' + mainColor]">
          <!-- 添加一个用于控制表格显示的状态 -->
             <WebIframe :web-url="web_url"  v-if="MainVisable['WebIframe']" :style="{ height:'100%'}" />
             <GptDisplay v-if="MainVisable['GptDisplay']" :style="{ height:'100%'}" />
        </el-main>
      </el-container>
    </el-container>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount, watch} from 'vue';
import { defineEmits } from 'vue';
import eventBus from '@/event-bus.js';
import WelcomeUser from "@/components/Main/UserManger/WelcomeUser.vue";

import WebIframe from "@/components/PublicTools/WebIframe.vue";
import GptDisplay from "@/components/StudentMain/SubStudentForms/GPTForms/GptDisplay.vue";
import AsideMenu from "@/components/StudentMain/AsideMenu.vue";
const headerColor = 'blue';
const asideColor = 'green';
const mainColor = 'orange';
const tableType = ref(""); // 假设的报备类型
const MainVisable= ref({
  WebIframe: false,
  GptDisplay: false
});

const web_url= ref("");
onMounted(() => {
  eventBus.on('report-form-table', handleReportFormTable);
  eventBus.on('report-form-table-admins', handleReportFormAdminTable);
  eventBus.on('course-selection-form-table', handleCourseSelectionTable);

});
onBeforeUnmount(() => {
  eventBus.off('report-form-table', handleReportFormTable);
  eventBus.off('report-form-table-admins', handleReportFormAdminTable);
  eventBus.off('course-selection-form-table', handleCourseSelectionTable);
});

const handleReportFormTable = (payload) => {
  tableType.value = payload.tableType;
  MainVisable.value.ReportFormTable=true;
  //其它内容置为false用循环
  for (let key in MainVisable.value) {
    if (key !== 'ReportFormTable') {
      MainVisable.value[key] = false;
    }
  }

};
const handleReportFormAdminTable = (payload) => {
  tableType.value = payload.tableType;
  MainVisable.value.ReportFormTableAdmin=true;
  //其它内容置为false用循环
  for (let key in MainVisable.value) {
    if (key !== 'ReportFormTableAdmin') {
      MainVisable.value[key] = false;
    }
  }
};
const handleCourseSelectionTable = () => {
  MainVisable.value.CourseSelectionFormTable=true;
  //其它内容置为false用循环
  for (let key in MainVisable.value) {
    if (key !== 'CourseSelectionFormTable') {
      MainVisable.value[key] = false;
    }
  }
};
const openGptWebUrl=(url)=>{
  MainVisable.value.WebIframe=true;
  web_url.value=url;
  //其它内容置为false用循环
  for (let key in MainVisable.value) {
    if (key !== 'WebIframe') {
      MainVisable.value[key] = false;
    }
  }
}


// 打开其它组件
const openFormsTable = (formName) => {
  //其它内容置为false用循环
  for (let key in MainVisable.value) {
    if (key !== formName) {
      MainVisable.value[key] = false;
    }
  }
  MainVisable.value[formName]=true;

}


watch(tableType, (newVal) => {
  if (newVal) {
    eventBus.emit('update-report-form-table-type', newVal);
  }
}, { immediate: true }); // 立即执行一次，确保初始值也能触发事件

</script>

<style scoped>

.bg-purple {
  background-color: #ebe0eb;
}

.header-blue {
  background-color: lightblue;
  width: 100%;
}

.aside-green {
  background-color: #f9faf9;
}

.main-orange {
  background-color: #f8f5f5;
}

.aside-default {
  width: 20%;
}

.report-button {
  margin: 10px; /* 为每个按钮添加一些间距 */
}


</style>
